{{ define "main" }}

<section class="section single-speaker">
  <div class="container">
    <div class="block">
      <div class="row">
        <div class="col-lg-5 col-md-6 align-self-md-top">
          <div class="image-block">
            <img src="{{ .Params.image | absURL }}" class="img-fluid" alt="{{ .Title }}">
          </div>
        </div>
        <div class="col-lg-7 col-md-6 align-self-center">
          <div class="content-block">
            <div class="name">
              <h3>{{ .Title }}</h3>
            </div>
            <div class="profession">
              <p>{{ .Params.designation | markdownify }}</p>
            </div>
            <div class="details">
              {{ .Content }}
            </div>
            <div class="social-profiles">
              <h5>Social Profiles</h5>
              <ul class="list-inline social-list">
                {{ range .Params.social}}
                <li class="list-inline-item">
                  <a href="{{ .link | safeURL }}"><i class="fa {{ .icon }}"></i></a>
                </li>
                {{ end }}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="block-2">
      <div class="row">
        {{ if .Params.personal_info.enable }}
        {{ with .Params.personal_info }}
        <div class="col-md-6">
          <div class="personal-info">
            <h5>{{ .title | markdownify}}</h5>
            <p>{{ .content | markdownify }}</p>
            <ul class="m-0 p-0">
              {{ range .bulletpoints }}
              <li>{{ . | markdownify }}</li>
              {{ end }}
            </ul>
          </div>
        </div>
        {{ end }}
        {{ end }}

        {{ if .Params.skills.enable }}
        {{ with .Params.skills }}
        <div class="col-md-6">
          <div class="skills">
            <h5>{{ .title | markdownify }}</h5>
            <p>{{ .content | markdownify }}</p>
            <div class="skill-bars">
              <!-- SkillBar -->
              {{ range .skillbars }}
              <div class="skill-bar">
                <p>{{ .name | markdownify }}</p>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" style="width: {{ .percentage }};"><span>{{ .percentage }}</span></div>
                </div>
              </div>
              {{ end }}
              </div>
            </div>
          </div>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>

{{ end }}
